.tab-osd {
	.info {
		margin: 10px 0 0 0;
		position: relative;
		width: 100%;
		.progressLabel {
			position: absolute;
			width: 100%;
			height: 26px;
			top: 0;
			left: 0;
			text-align: center;
			line-height: 24px;
			color: white;
			font-weight: bold;
            a {
                color: white;
                &:hover {
                    text-decoration: underline;
                }
            }
		}
        .progress {
            width: 100%;
            height: 26px;
            border-radius: 5px;
            border: 1px solid var(--surface-500);
            -webkit-appearance: none;
            &::-webkit-progress-bar {
                background-color: var(--text);
                border-radius: 4px;
                box-shadow: inset 0 0 5px #2f2f2f;
            }
            &::-webkit-progress-value {
                background-color: #F86008;
                border-radius: 4px;
            }
        }
        .progress.valid {
            &::-webkit-progress-bar {
                background-color: #56ac1d;
                border-radius: 4px;
            }
            &::-webkit-progress-value {
                background-color: #56ac1d;
                border-radius: 4px;
            }
        }
        .progress.invalid {
            &::-webkit-progress-bar {
                background-color: #A62E32;
                border-radius: 4px;
            }
            &::-webkit-progress-value {
                background-color: #A62E32;
                border-radius: 4px;
            }
        }
	}
	.spacer_box_title {
		.profileOsdHeader {
			padding: 0 6px;
		}
	}
	ul {
		li {
			list-style: circle;
			margin-left: 30px;
		}
	}
	.options {
		position: relative;
		margin-bottom: 10px;
		line-height: 18px;
		text-align: left;
		label {
			input {
				margin-top: 2px;
			}
			span {
				font-weight: bold;
				margin-left: 6px;
			}
		}
		select {
			width: 300px;
			height: 20px;
			border: 1px solid var(--surface-500);
		}
		.releases {
			select {
				width: 280px;
			}
		}
		.description {
			position: relative;
			left: 0;
			font-style: italic;
			color: #818181;
		}
		.flash_on_connect_wrapper {
			display: none;
		}
		.manual_baud_rate {
			select {
				width: 75px;
				margin-left: 19px;
			}
		}
	}
	td {
		text-align: left;
	}
	.option.releases {
		margin: 0 0 2px 0;
		line-height: 20px;
	}
	.cf_table {
		td {
			&:last-child {
				text-align: left;
			}
		}
	}
	.release_info {
		display: none;
		.title {
			line-height: 20px;
			text-align: center;
			font-weight: bold;
			color: white;
			border-bottom: 1px solid var(--surface-500);
			background-color: #3f4241;
		}
		.target {
			color: blue;
		}
		p {
			padding: 5px;
			a {
				font-weight: bold;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		.notes {
			padding: 5px;
		}
	}
	.btn {
		.disabled {
			cursor: default;
			color: #fff;
			background-color: #AFAFAF;
			border: none;
			pointer-events: none;
			opacity: 0.5;
		}
	}
	.display-layout {
		label {
			margin: .25em .1em;
			display: inline-block;
		}
		input {
			margin: .1em 1em;
		}
		input.position {
			width: 5em;
			border-bottom: 1px solid var(--surface-500);
		}
	}
	.hide {
		display: none;
	}
	.note {
		padding: 1em;
	}
	.col {
		display: inline-block;
	}
	.preview-parent {
		position: sticky;
		top: 1.5rem;

		/* please don't copy the generic background image from another project
		* and replace the one that @nathantsoi took :)
		*/
        .preview {
            background: url(../../images/osd-bg-1.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }
		.gui_box_titlebar {
			label {
				max-width: 100px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				white-space: nowrap;
				vertical-align: text-bottom;
			}
		}
		.gui_box_bottombar {
			text-align: center;
		}
		.row {
			display: flex;
		}
		.char {
			display: flex;
			padding: 0;
			margin: 0;
			flex: 1 1 auto;
			flex-wrap: nowrap;
			border: 1px solid transparent;
			img {
				flex: 1 1 auto;
				max-width: 100%;
				height: auto;
			}
		}
		.char[draggable="true"] {
			cursor: move;
		}

		&:active {

			&:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 40%;
				border-top: 0.3em dashed var(--gimbalCrosshair);
				width: 20%;
				transform: translateY(-50%);
				pointer-events: none;
			}

			&:after:extend(.tab-osd .preview:active:before) {
				transform: translateY(-50%) rotate(90deg);
			}

			.char {
				border: 1px dashed rgba(55, 55, 55, 0.5) ;
			}
		}

	}
	.osd-preview-zoom {
		width: max-content !important;
		padding-right: 1em;
	}
	.osd-preview-zoom-group {
		display: none;
	}
	.osd-preview-zoom-selector {
		margin-left: 5px;
		vertical-align: text-bottom;
	}
	.char.mouseover {
		background: rgba(255,255,255,0.4);
	}
	.char.dragging {
		background: rgba(255,255,255,0.4);
	}
	.char-label.mouseover {
		background: rgba(255,255,255,0.4);
	}
    .osd-feature {
        .gui_box_titlebar {
            left: 0;
        }
    }
	.switchable-field {
		padding: 3px;
		border: 1px solid transparent;
		border-bottom: 1px solid var(--surface-500);
		input {
			border-radius: 3px;
			border: 1px solid var(--surface-500);
			padding: 2px;
		}
		input[type=number] {
			display: none;
			line-height: 23px;
			height: 23px;
			box-sizing: border-box;
			padding-right: 0;
		}
		label {
			margin-left: 5px;
		}
		&:last-child {
			border-bottom: 0;
		}
	}
	.switchable-field.mouseover {
		background: var(--surface-200);
		border: 1px solid var(--surface-500);
		font-weight: 800;
	}
	.switchable-fields {
		margin-top: 5px;
		margin-bottom: 8px;
		width: 100%;
	}
	.switchable-field-flex {
		display: flex;
        gap: 0.5rem;
        align-items: center;
		.switchable-field-description {
			display: flex;
			flex-direction: row;
			min-width: 0;
			justify-content: space-between;
            align-items: center;
			width: 100%;
			flex-wrap: wrap;
			.osd-variant {
				flex-grow: 2;
			}
		}
	}
	input {
		background: var(--surface-200);
		color: var(--text);
		border: 1px solid var(--surface-500);
		border-radius: 3px;
	}
	input[type="radio"]:disabled {
		cursor: not-allowed;
	}
	select {
		background: var(--surface-200);
		color: var(--text);
		border: 1px solid var(--surface-500);
		border-radius: 3px;
	}
	select.osd-variant {
		max-width: 100%;
	}

	.alarms {
		label {
			display: block;
			width: 100%;
			border-bottom: 1px solid var(--surface-500);
			margin-top: 5px;
			padding-bottom: 5px;
			&:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}
		}
		input {
			width: 55px;
			padding-left: 3px;
			height: 18px;
			line-height: 20px;
			text-align: left;
			border-radius: 3px;
			margin-right: 11px;
			font-size: 11px;
			font-weight: normal;
		}
	}
	.grid-col {
		margin: 0px;
	}
    #font-logo-preview-container {
        background: rgba(0, 255, 0, 0.4);
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    #font-logo-preview {
        background: rgba(0, 255, 0, 1);
        line-height: 0;
        margin: auto;
    }
    #font-logo-info {
        font-size: 125%;
        line-height: 150%;
        h3 {
            margin-bottom: 0.2em;
        }
        ul {
            li {
                &:before {
                    content: '\2022\20';
                }
            }
            li.valid {
                color: #00a011;
                &:before {
                    content: '\2714\20';
                }
            }
            li.invalid {
                color: #a01100;
                &:before {
                    content: '\2715\20';
                }
            }
        }
        #font-logo-info-upload-hint {
            margin-top: 1em;
            display: none;
        }
    }
    button {
        padding: 4px 10px !important;
        font-weight: 600;
        font-size: 9pt !important;
        cursor: pointer;
    }
    .fontpresets_wrapper {
        display: inline-block;
        position: absolute;
        right: 1.2em;
        top: .8em;
    }
    .fontpresets {
        background: var(--surface-200);
        color: var(--text);
        border: 1px solid var(--surface-500);
        border-radius: 3px;
    }
    .spacer_box {
        div {
            label {
                display: inline-flex;
                gap: 3px;
                margin-right: 10px;
            }
        }
    }
    .timer-option {
        padding: 2px;
        display: inline !important;
    }
    .timers-container {
        .timer-detail {
            padding-left: 15px;
            padding-top: 3px;
            padding-bottom: 3px;
        }
        label {
            margin-right: 5px !important;
            display: inline-block;
            width: 80px;
        }
        input {
            width: 150px;
        }
        select {
            width: 150px;
        }
    }
    @media all and (max-width: 1455px) {
        .grid-box {
            .col-span-2 {
                grid-column: span 4;
                grid-row-start: 1;
                grid-row-end: 1;
            }
            .col-span-1 {
                grid-column: span 2;
            }
        }
    }
    @media all and (max-width: 575px) {
        .grid-box {
            &.col4 {
                grid-template-columns: 1fr;
                .col-span-2 {
                    grid-column: span 1;
                }
                .col-span-1 {
                    grid-column: span 1;
                }
            }
        }
    }

}
